@{
    ViewData["Title"] = "选择生产工单";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/layui/css/layui.css">
    <style>
        .search-panel {
            padding: 15px;
            background: #f8f8f8;
            margin-bottom: 10px;
        }
        .table-container {
            padding: 0 15px;
        }
        .status-tag {
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 12px;
            color: #fff;
        }
        .status-open { background: #009688; }
        .status-processing { background: #ff9800; }
        .status-completed { background: #5fb878; }
        .status-closed { background: #999; }
    </style>
</head>
<body>
    <!-- 搜索表单 -->
    <div class="search-panel">
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">工单编号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="workOrderCode" placeholder="请输入工单编号" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">产品名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="productName" placeholder="请输入产品名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status">
                            <option value="">全部</option>
                            <option value="0">待开始</option>
                            <option value="1">进行中</option>
                            <option value="2">已完成</option>
                            <option value="3">已关闭</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn layui-btn-sm" id="btnSearch">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 数据表格 -->
    <div class="table-container">
        <table class="layui-table" lay-filter="workOrderTable" id="workOrderTable"></table>
    </div>

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form'], function(){
            var table = layui.table;
            var form = layui.form;
            var selectedWorkOrder = null;

            // 表格渲染
            var tableIns = table.render({
                elem: '#workOrderTable',
                url: '/Packing/GetWorkOrderSelectList',
                method: 'POST',
                page: true,
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'data'
                },
                cols: [[
                    {type: 'radio', width: 60},
                    {field: 'workOrderCode', title: '工单编号', width: 150},
                    {field: 'workOrderName', title: '工单名称', width: 180},
                    {field: 'productCode', title: '产品编码', width: 120},
                    {field: 'productName', title: '产品名称', width: 150},
                    {field: 'specification', title: '规格', width: 120},
                    {field: 'unit', title: '单位', width: 80},
                    {field: 'quantity', title: '数量', width: 80},
                    {field: 'requiredDate', title: '要求完成时间', width: 120, templet: function(d) {
                        return d.requiredDate ? layui.util.toDateString(new Date(d.requiredDate), 'yyyy-MM-dd') : '';
                    }},
                    {field: 'status', title: '状态', width: 80, templet: function(d) {
                        var statusMap = {
                            '0': '<span class="status-tag status-open">待开始</span>',
                            '1': '<span class="status-tag status-processing">进行中</span>',
                            '2': '<span class="status-tag status-completed">已完成</span>',
                            '3': '<span class="status-tag status-closed">已关闭</span>'
                        };
                        return statusMap[d.status] || '未知';
                    }}
                ]]
            });

            // 搜索
            $('#btnSearch').on('click', function() {
                var formData = form.val('searchForm');
                tableIns.reload({
                    where: formData,
                    page: { curr: 1 }
                });
            });

            // 监听单选框选择
            table.on('radio(workOrderTable)', function(obj) {
                selectedWorkOrder = obj.data;
                console.log('选中的工单:', selectedWorkOrder);
            });

            // 提供给父窗口调用的函数
            window.getSelectedWorkOrder = function() {
                return selectedWorkOrder;
            };
        });
    </script>
</body>
</html> 